<template>
  <div class="protocol">
    <div class="check"
         :class="{checked: isSelect}"
         @click="handleChange">
      <i class="iconfont">&#xe655;</i>
    </div>
    <div class="text"
         @click="handleProtocol">《免责协议》</div>
  </div>
</template>
<script>
export default {
  name: 'protocol',
  data () {
    return {
      isSelect: true
    }
  },
  methods: {
    handleProtocol () {
      // this.$emit('protocol', this.isSelect)
    },
    handleChange () {
      this.isSelect = !this.isSelect
      this.$emit('protocol', this.isSelect)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.protocol
  width 100%
  height 80px
  align-items center
  display flex

  .check
    width 26px
    height 26px
    border 2px solid $original_price
    margin-right 30px
    display flex
    align-items center
    justify-content center

    i
      font-size $common_fz
      color $space

  .checked
    background-color $wechat
    border-color transparent

    i
      color $common_bgc

  .text
    font-size $common_fz
    font-weight 400
    color $protocol
</style>
